<!--
@author ljy
20220409
表格工具栏中的表格列按钮，用于配合表格，控制表格列显示的插件。
初始化时默认全部为选中状态。
 一、用法
（一）基本用法（例子参照部门菜单：@/components/base/table/TableToolbarColumnSetting.vue）
1.1 引入组件的方式
import TableToolbarColumnSetting from '@/components/base/table/TableToolbarColumnSetting.vue';
1.2 使用方式
<TableToolbarColumnSetting
        ref="columnSettingRef"
        class="operation-button"
        :tableColumns="tableColumns"
        @changeColumnSelect="getColumnsSelected"
      />
1.3 参数说明：
（1）tableColumns，表格的列集合属性
（2）changeColumnSelect(columnsSelected:string[])
当选中的表格列发生变化时触发，参数columnsSelected表示最新的列选择属性
-->

<template>
  <el-popover placement="bottom-end" :width="80" trigger="click">
    <template #reference>
      <el-button icon="Setting" class="button"/>
    </template>
    <!--全选按钮-->
    <el-checkbox label="全选" v-model="allColumnsSelected" @change="handleCheckAllChange"/>
    <el-divider style="margin:4px 0;"/>
    <el-checkbox-group v-model="columnsSelected">
      <!--表格列-->
      <div v-for="item in tableColumns"  :key="item.prop">
        <el-checkbox
          :label="item.prop"
        >{{item.label}}</el-checkbox>
      </div>
<!--      <el-checkbox
        v-for="item in tableColumns"
        :label="item.prop"
        :key="item.prop"
      >{{item.label}}</el-checkbox>-->
    </el-checkbox-group>
  </el-popover>
</template>

<script lang="ts" setup>
import {
  ref, defineProps, watch, defineExpose, getCurrentInstance, onMounted,
} from 'vue';
import { TableColumn } from '@/types/interface/base_interface';

const { proxy } = getCurrentInstance();
// 读取父容器传递过来的选择列表
interface Props {// 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  tableColumns:TableColumn[], // 表格的列元素集合
}
const props = defineProps<Props>();
// 已经选择的表格列
const columnsSelected = ref<string[]>([]);
// 全选按钮的选中状态
const allColumnsSelected = ref(false);

// 获取选择的列表，设计来暴露给父组件使用
const getColumnsSelected = ():string[] => columnsSelected.value;
// 全选复选框切换操作
const handleCheckAllChange = (value:boolean):void => {
  if (value) { // 如果全选框为选中状态
    allColumnsSelected.value = true;
    // 先清空已选择列表
    columnsSelected.value = [];
    // 全选所有
    props.tableColumns.forEach((tableColumn:TableColumn) => {
      columnsSelected.value.push(tableColumn.prop);
    });
  } else {
    allColumnsSelected.value = false;
    // 清空已选择列表
    columnsSelected.value = [];
  }
};
// 监控已选择列表，保证全选状态显示的合理性
watch(columnsSelected, (newVal:any, oldVal:any) => {
  proxy.$emit('changeColumnSelect', newVal);
  if (newVal.length < props.tableColumns.length) { // 如果选择的选项少于所有选项，则全选按钮不打钩
    allColumnsSelected.value = false;
  } else {
    allColumnsSelected.value = true;
  }
}, { immediate: true });

// 初始化时，默认是列组件是全部选中状态
onMounted(() => {
  handleCheckAllChange(true);
});

defineExpose({
  getColumnsSelected,
  handleCheckAllChange,
  columnsSelected,
});

</script>

<style lang="scss" scoped>
.button{
  margin:0 0 0 5px;
}
</style>
